@extends('admin.layout.app')

@section('title', '會員登陸日誌')

@section('content')
    <div class="layui-col-lg12">
        <div class="layui-card">
            <div class="layui-card-header">
                客服操作日誌列表
            </div>
            <div class="layui-card-body">
                <form class="layui-form" id="search-form" action="" onsubmit="return false;">
                    <div class="tool-bar layui-form-item">

                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="date" name="time" value="{{ $input['time']??'' }}" placeholder="選擇日期" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <input class="layui-input" name="ip" id="ip" autocomplete="off" placeholder="登錄IP" value="{{ $input['ip']??'' }}">
                        </div>
                        <div class="layui-inline">
                            <input class="layui-input" name="staff_id" id="staff_id" autocomplete="off" placeholder="客服工號" value="{{ $input['staff_id']??'' }}">
                        </div>
                        <div class="layui-inline">
                            <div class="layui-btn-group">
                                <button class="layui-btn" data-type="reload" title="搜索">
                                    <i class="layui-icon layui-icon-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <table class="layui-hide" id="lst" lay-filter="tb"></table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //常規用法
            //日期時間範圍
            var index = laydate.render({
                elem: '#date'
                , type: 'date'
                , range: true
            });
            console.log(index);
        });
        layui.use('table', function () {
            var table = layui.table;
            //方法級渲染
            table.render({
                elem: '#lst'
                , url: "@broute('operation.log')"
                , cols: [[
                    {field: 'staff_id', title: '客服編號', width: 150}
                    , {field: 'admin_name', title: '客服名稱', width: 200}
                    , {field: 'route_permission', title: '操作權限名', sort: false}
                    , {field: 'uri', title: 'URI', sort: false, width: 200}
                    , {field: 'ip', title: '登錄IP', sort: false, templet: '<span><i class="layui-icon layui-icon-location" data-ip="@{{d.ip}}"></i> @{{d.ip}}</span>'}
                    , {field: 'session_id', title: '會話ID', sort: false}
                    , {field: 'operated_at', title: '操作時間', width: 200}
                ]]
                , id: 'table'
                , page: true
                , limit: 20
                , loading: true
            });
            var $ = layui.$, active = {
                reload: function () {
                    // 執行重載
                    table.reload('table', {
                        page: {curr: 1}
                        , where: $('#search-form').serializeJSON()
                    });
                }
            };
            $('.tool-bar .layui-btn, #toolbar a[data-type]').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
@endsection
